<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter();
const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
    { text: '2436345320', color: 'red' },
    { text: '2846146704' },
    { text: '5237881469' },
];
const onSelect = (action) => showToast(action.text);

const signature = ref('请输入你的个性签名dasd')

const name = computed(() => {
    if (signature.value.length > 9) {
        return signature.value.substring(0, 9) + '...'
    }
    return signature.value
})


const li = ref([
    { name: '超级秀', path: '/Wode' },
    { name: '直播', path: '/Wode' },
    { name: '我的钱包', path: '/Wode' },
    { name: '财富小金库', path: '/Wode' },
    { name: '装扮我的空间', path: '/Wode' },
    { name: '我的相册', path: '/Wode' },
    { name: '我的收藏', path: '/Wode' },
])
</script>

<template>
    <div style="height: 100vh;background-image: url('/QQ背景.png');">
        <div class="w-full h-1/5">
            <van-button
                style="border-radius: 50%; background-color: rgba(204, 204, 204, 0.436); 
            width: 30px; height: 30px; float: right; margin-top: 20px; margin-right: 10px; text-align: center; border: 0px;"
                @click="router.push('/message')">X</van-button>
        </div>
        <div class="w-full h-4/5"
            style="border-top-right-radius: 16px; border-top-left-radius: 16px; background-color: rgb(243, 242, 247);">
            <div style="padding-top: 20px; padding-left: 15px;" class="w-full h-1/5 flex">
                <img class="w-16 h-16 rounded-full border-white border-4" src="/1.jpg" alt="" />
                <div class="mt-4 ml-3">
                    <span>☀️☀️🌙⭐⭐</span>
                    <p><van-icon name="edit" /><span style="font-size: 12px;">{{ name }}</span></p>
                </div>
                <div class="ml-20">
                    <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
                        <template #reference>
                            <p style="font-size: 14px;">切换账号<van-icon name="arrow-down" /></p>

                        </template>
                    </van-popover><br>
                    <van-icon name="qr-invalid" size="25" class='ml-12 mt-4' @click="router.push('/twocode')" />
                </div>

            </div>
            <div class="h-100% mx-auto" style="width: 98%;">
                <van-cell-group inset>
                    
                    <van-cell   icon="location-o" is-link v-for="i in li" :key="i.path" :title="i.name" />
                    
                </van-cell-group>
            </div>

        </div>
    </div>
</template>

<style scoped></style>